<script setup>
defineOptions({ name: 'ArticleManage' })
import { ArticleDeleteService, ArticleGetListService } from '@/api/article'
import CardPage from '@/components/CardPage.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Edit, Delete } from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import { dateFormat } from '@/utils/format'
import ChannelSelect from './components/ChannelSelect.vue'
import ArticleDrawer from './components/ArticleDrawer.vue'
// 获取文章列表渲染
const articleTotal = ref(0)
const articleSearchForm = ref({
  pageNum: 1,
  pageSize: 2,
  cateId: '',
  state: ''
})
const articleList = ref([])
const loading = ref(true)
const getArticleList = async () => {
  loading.value = true
  const res = await ArticleGetListService(articleSearchForm.value)
  articleList.value = res.data
  articleTotal.value = res.total
  loading.value = false
}
getArticleList()
// 重置搜索列表
const resetSearchForm = async () => {
  articleSearchForm.value.cateId = ''
  articleSearchForm.value.state = ''
  getArticleList()
}
// 删除文章
const handleDelArticle = async (row) => {
  const res = await ArticleDeleteService(row.id)
  ElMessage.success(res.message)
  getArticleList()
}

// 添加文章与编辑文章
const articleDrawerRef = ref(null)
const handelArticleDrawer = (row) => {
  articleDrawerRef.value.open(row)
}
const handleSuccess = (e) => {
  ElMessage.success(e.message)
  // console.log(articleTotal.value)
  if (e.type === 'add') {
    articleSearchForm.value.pageNum = Math.ceil(
      (articleTotal.value + 1) / articleSearchForm.value.pageSize
    )
  }
  getArticleList()
}
</script>
<template>
  <div class="article-manage">
    <card-page title="文章管理">
      <template #header-right>
        <el-button type="primary" @click="handelArticleDrawer({})">
          发布文章
        </el-button>
      </template>
      <template #default>
        <el-form :inline="true">
          <el-form-item label="文章分类：">
            <channel-select
              v-model:cate-id="articleSearchForm.cateId"
            ></channel-select>
          </el-form-item>
          <el-form-item label="分布状态：">
            <el-select
              v-model="articleSearchForm.state"
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option key="已发布" label="已发布" value="已发布" />
              <el-option key="草稿" label="草稿" value="草稿" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getArticleList">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetSearchForm">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="articleList"
          style="width: 100%"
          height="80%"
          :row-style="{ height: '50px' }"
          stripe
          v-loading="loading"
        >
          <el-table-column label="文章标题" prop="title"></el-table-column>
          <el-table-column label="分类" prop="cate_name"></el-table-column>
          <el-table-column label="发表时间">
            <template #default="{ row }">
              {{ dateFormat(row.pub_date) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state"></el-table-column>
          <el-table-column label="操作" width="100px">
            <template #default="{ row }">
              <el-button
                plain
                circle
                type="primary"
                :icon="Edit"
                @click="handelArticleDrawer(row)"
              >
              </el-button>
              <el-button
                plain
                circle
                type="danger"
                :icon="Delete"
                @click="handleDelArticle(row)"
              ></el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="无数据"></el-empty>
          </template>
        </el-table>
        <div class="page">
          <el-pagination
            v-model:current-page="articleSearchForm.pageNum"
            v-model:page-size="articleSearchForm.pageSize"
            :default-page-size="2"
            :page-sizes="[2, 4, 6, 8]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="articleTotal"
            @size-change="getArticleList"
            @current-change="getArticleList"
          />
        </div>
      </template>
    </card-page>
    <article-drawer
      ref="articleDrawerRef"
      @show-success="handleSuccess($event)"
    ></article-drawer>
  </div>
</template>
<style lang="scss" scoped>
.article-manage {
  height: 100%;
  .page {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
}
</style>
